<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<title>人车人</title><link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/common.css" />
<link rel="stylesheet" href="/assets/css/iconfont/iconfont.css" />
<link rel="stylesheet" href="/assets/css/swiper-3.4.2.min.css" />
<style>
	header {
		height: 40px;
		background-color: #fff;
		overflow: hidden;
		position: relative;
	}
	
	header h2 {
		text-align: center;
		color: #4d4d4d;
		line-height: 40px;
		font-weight: normal;
		font-size: 18px;
	}
	
	header .icon {
		height: 100%;
		position: absolute;
		top: 0;
		-webkit-align-items: center;
		align-items: center;
		padding: 0 19px;
	}
	
	header .icon a {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	
	header .icon.left {
		left: 0;
	}
	
	header .icon.right {
		right: 0;
	}
	
	section .container .ulcon li .title {
		height: 55px;
		line-height: 55px;
		padding: 0 10px 0 18px;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		font-size: 15px;
		background-color: #fff;
	}
	
	section .container .ulcon li .title img {
    	-webkit-transition: .3s ease;
    	transition: .3s ease;
	}
	
	section .container .ulcon li .title.show img {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	
	section .container .ulcon li .hidden {
		background-color: #f2f2f2;
		padding: 0 15px;
		position: relative;
		height: 0;
		overflow: hidden;
		-webkit-transition: .3s ease;
    	transition: .3s ease;
	}
	
	section .container .ulcon li .hidden .sanjiao {
		position: absolute;
	    left: 55px;
	    top: -5px;
	    width: 13px;
	}
	
	section .container .ulcon li .hidden .sample {
		-webkit-align-items: center;
		align-items: center;
	}
	
	section .container .ulcon li .hidden .sample .clickarea {
		padding: 5px;
		margin-right: 6px;
		font-size: 0;
		-webkit-align-items: center;
		align-items: center;
	}
	
	section .container .ulcon li .hidden .sample .clickarea img {
		margin-right: 5px;
	}
	
	section .container .ulcon li .hidden .sample .clickarea span {
		font-size: 12px;
		color: #666;
	}
	
	section .container .ulcon li .hidden .sample .bor {
		height: 1px;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #e6e6e6;
	}
	
	section .container .ulcon li .hidden .upload-wrapper {
		overflow: hidden;
	}
	
	section .container .ulcon li .hidden .upload-wrapper .addupload {
		width: 150px;
		text-align: center;
		margin: 0 auto 15px;
	}
	
	section .container .ulcon li .hidden .upload-wrapper .addupload .bg {
		width: 40px;
	    height: 40px;
	    background-image: url(/assets/img/upload_4.png);
	    background-repeat: no-repeat;
	    -webkit-background-size: 100%;
	    background-size: 100%;
	    margin: 14px auto 8px;
	}
	
	section .container .ulcon li .hidden .upload-wrapper .addupload span {
		color: #4ec2ff;
	}
	
	section .container .ulcon li .hidden .upload {
		position: relative;
		background-color: #fff;
		border: 1px dashed #ccc;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 6px;
		margin-bottom: 9px;
		padding: 12px 0 13px;
	}
	
	section .container .ulcon li .hidden .upload p.look {
		position: absolute;
		-webkit-align-items: center;
		align-items: center;
		top: 0;
		bottom : 0;
		right: 0;
		width: 28px;
		border-left: 1px dashed #ccc;
		text-align: center;
	    font-size: 13px;
	    color: #999;
	    padding: 0 6px;
	}
	
	section .container .ulcon li .hidden .upload .uparea {
		margin: 11px auto 13px;
		width: 60px;
		height: 60px;
		position: relative;
		background-image: url(/assets/img/upload_4.png);
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
	}
	
	section .container .ulcon li .hidden .upload .uparea .progress {
		display: none;
		text-align: center;
	    line-height: 40px;
	    font-size: 12px;
	    background-color: #fff;
	    position: relative;
	    z-index: 1;
	    width: 40px;
	    left: 10px;
	    top: 10px;
	}
	
	section .container .ulcon li .hidden .upload .uparea input {
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
		top: 0;
		left: 0;
	}
	
	section .container .ulcon li .hidden .upload p.name {
		font-size: 14px;
		color: #4ec2ff;
		text-align: center;
		padding: 0 10px;
	}
	
	section .container .ulcon li .hidden .upload.suc p.look {
		color: #f6a32d;
	}
	
	section .container .ulcon li .hidden .upload.suc .uparea {
		background-image: url(/assets/img/order_suc.png);
	}
	
	section .container .ulcon li .hidden .upload.suc p.look {
		color: #f6a32d;
	}
	
	section .container .ulcon li .hidden .upload.suc p.name {
		color: #999;
	}
	
	section .container .ulcon li .hidden .upload.err .uparea {
		background-image: url(/assets/img/exclamatory.png);
	}
	
	section .container .ulcon li .hidden .upload.err p.name {
		color: #f6a32d;
	}
	
	section .container .ulcon li .hidden .upload.err p.look {
		color: #f6a32d;
	}
	
	section .container .ulcon li .hidden .upload.err p.errtext {
		color: #f6a32d;
	    margin-top: 10px;
	    padding: 0 10px;
	    text-align: center;
	}
	
	.swiper-container {
		height: 100%;
	}
	
	.swiper-container img {
		position: absolute;
		top: 50%;
		left: 50%;
	}
	
	.swiper-pagination-bullet-active {
		background: #dadada;
	}
	
	.swiper-pagination-bullet {
		background: #fff;
	}
	
</style>
</head>
<body>
	<!-- header start -->
	<header class="b_bor">
		<div class="icon left flexbox" id="back"><img src="/assets/img/back2@2x.png" width="10" /></div>
		<h2>资料补充</h2>
		<div class="icon right flexbox"><a href="/userCenter"></a><img src="/assets/img/order_user.png" width="20" /></div>
	</header>
	<!-- end header -->
	#@loadContainer()
	<div id="show-template" class="show-template trans">
		<div class="loading"></div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				
			</div>
			<div class="swiper-pagination"></div>
		</div>
	</div>
	<section id="upload-wrapper" class="visiblecon sectrans">
		<div class="container">
			<ul class="ulcon" id="ulcon">
				<p style="margin-top: 26%;text-align: center;">审核中，请耐心等待...</p>
			</ul>
			<a href='javascript:;' id='subbtn' class='subbtn'>提交</a>
		</div>
	</section>


	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/jquery-3.1.1.min.js"></script>
	<script src="/assets/js/axios.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script src="/assets/js/swiper-3.4.2.jquery.min.js"></script>
	<script>
        $(function(){
        	var accept = "image/jpg, image/jpeg, image/png, image/gif"
   			if(_x.isAndroid()){
   				accept = "image/*"
   			}
        	
        	//返回
        	$("#back").click(function(){
        		window.location.href = "/userCenter/uploadInfo"
        	})
        	
        	//导航提醒
        	var ulDom = $("#ulcon"),
	    		step = 0;
        	
        	axios.post("/supply/getStep")
        	.then(function(res){
        		step = res.data.step
        		if (init(step)){
        			axios.post("/supply/getInfo")
            		.then(function(b){
            			console.log(b.data)
            			if (b.data.length <= 0) {
            				ulDom.children("p").html("暂无需要补充的资料！")
            				$("#subbtn").hide()
            				$("#upload-wrapper").removeClass("visiblecon")
        					$("#load-container").removeClass("load7")
            				return
            			}
            			getBaseTab(b.data)
            		})
        		}
        		
        	})
        	
        	function init (step) {
        		if (step === 2 || step === 4) {
        			$("#upload-wrapper").removeClass("visiblecon")
        			$("#load-container").removeClass("load7")
        			$("#subbtn").hide()
        			return false
        		} else if (step === 5) {
        			$("#upload-wrapper").removeClass("visiblecon")
        			$("#load-container").removeClass("load7")
        			$("#subbtn").hide()
        			ulDom.children("p").html("审核已通过！")
        			return false
        		}
        		return true
        	}
        	
			function getBaseTab (data) {
        		var html = ""
        			
        		for (var i = 0; i < data.length; i++) {
        			
        			html += "<li>"+
        					"	<div class='title ac b_bor flexbox'>"+
        					"		<p>"+ data[i].zhExpl +"</p>"+
        					"		<img src='/assets/img/next.png' width='12' height='21' />"+
        					"	</div>"+
        					"	<div class='hidden'>"+
        					"		<img class='sanjiao' src='/assets/img/sj_upload.png' />"+
        					"		<div class='sample flexbox'>"+
        					"			<div class='clickarea flexbox look-hook' modelpath='"+ data[i].modelPath +"' modelname='"+ data[i].modelName +"'>"+
        					"				<img src='/assets/img/sample.png' width='13' />"+
        					"				<span>示例</span>"+
        					"			</div>"+
        					"			<div class='bor flex'></div>"+
        					"		</div>"+
        					"		<div class='upload-wrapper'>"
        			var son = data[i].sonTab.split(",")
        			//判断是为了需要渲染添加更多的图片
        			if (data[i].state && data[i].state.length > 0) {
        				for (var j = 0; j < data[i].state.length;j++) {
            				var name = "",
            					upCls = "",
            					vaildate = 0,
            					lookSrc = "",
            					fileInput = "<input type='file' name='"+ data[i].paramterName +"_"+ (j + 1) +"' accept='"+ accept +"' />",
            					errText = ""
            				
            				if (son.length - 1 >= j) {
            					name = data[i].zhExpl +"-"+ son[j]
            					
	           					if (isNaN(son[j])) {
	               					name = son[j]
	               				}	
            				} else {
            					name = j + 1 
            				}
            					
            				if (data[i].state) {
            					lookSrc = data[i].state[j]
            					if (data[i].state[j] == 1 || data[i].state[j] == 6) {//图片已上传，并且可以修改 6已重新上传，但是没有审核
            						upCls = "suc"
            						vaildate = 1
            					} else if (data[i].state[j] == 2) {//审核中，不能修改
            						upCls = "suc"
               						vaildate = 1
            						fileInput = ""
            					} else if (data[i].state[j] == 3) {//有反馈，重新上传图片
            						upCls = "err"
                  					vaildate = 2
                  					errText = "<p class='errtext'>"+ data[i].err[j] +"</p>"
            					} else if (data[i].state[j] == 5) {//审核通过，不能修改
            						upCls = "suc"
            						vaildate = 1
            						fileInput = ""
            					}
            				}
            				
            				//data-vaildate 0 没上传 1 已上传 2需要重新上传
            				html += "<div class='upload "+ upCls +"' data-vaildate='"+ vaildate +"'>"+
            						"	<p class='look look-hook flexbox' src='"+ lookSrc +"'>点击预览</p>"+
            						"	<div class='uparea'>"+
            						"		<p class='progress'>0%</p>"+
            								fileInput+
            						"	</div>"+
            						"	<p class='name'>"+ name +"</p>"+
            							errText+
            						"</div>"
            			}
        			} else {
        				for (var j = 0; j < son.length;j++) {
            				var name = data[i].zhExpl +"-"+ son[j],
            					upCls = "",
            					vaildate = 0,
            					lookSrc = "",
            					fileInput = "<input type='file' name='"+ data[i].paramterName +"_"+ (j + 1) +"' accept='"+ accept +"' />",
            					errText = ""
            				
           					if (isNaN(son[j])) {
               					name = son[j]
               				}	
            					
            				if (data[i].state) {
            					lookSrc = data[i].value[j]
            					if (data[i].state[j] == 1 || data[i].state[j] == 6) {//图片已上传，并且可以修改 6已重新上传，但是没有审核
            						upCls = "suc"
            						vaildate = 1
            					} else if (data[i].state[j] == 2) {//审核中，不能修改
            						upCls = "suc"
               						vaildate = 1
            						fileInput = ""
            					} else if (data[i].state[j] == 3) {//有反馈，重新上传图片
            						upCls = "err"
                  					vaildate = 2
                  					errText = "<p class='errtext'>"+ data[i].errs[j] +"</p>"
            					} else if (data[i].state[j] == 5) {//审核通过，不能修改
            						upCls = "suc"
            						vaildate = 1
            						fileInput = ""
            					}
            				}
            				
            				//data-vaildate 0 没上传 1 已上传 2需要重新上传
            				html += "<div class='upload "+ upCls +"' data-vaildate='"+ vaildate +"'>"+
            						"	<p class='look look-hook flexbox' src='"+ lookSrc +"'>点击预览</p>"+
            						"	<div class='uparea'>"+
            						"		<p class='progress'>0%</p>"+
            								fileInput+
            						"	</div>"+
            						"	<p class='name'>"+ name +"</p>"+
            							errText+
            						"</div>"
            			}
        			}
        			
        			if (data[i].auto) {
        				html += "<div class='addupload' name='"+ data[i].paramterName +"'>"+
		    					"	<div class='bg'></div>"+
		    					"	<span>继续添加</span>"+
		    					"<div>"		
        			}
        			
        					
        			html += "</div></div></li>"
        		}
        		ulDom.html(html)
        		$("#upload-wrapper").removeClass("visiblecon")
    			$("#load-container").removeClass("load7")
        	}
        	
        	//点击展开
        	ulDom.on("click","div.title",function() {
        		var that = $(this),
        			hideDom = that.siblings('.hidden')
        		
        		showHidden(that.hasClass("show"), that, hideDom, true)
        	})
        	
        	function showHidden (type, titleDom, hideDom, isHide) {
            	if (type && isHide) {
            		hideDom.css({height: 0, overflow: 'hidden'})
        			titleDom.removeClass("show")
            	} else {
            		hideDom.css({height: hideDom[0].scrollHeight, overflow: 'visible'})
        			titleDom.addClass("show")
            	}
            }
        	
        	//上传控件
            ulDom.on("change","input[type=file]",function(){
                var that = $(this),
                	file = that[0].files[0];
                if(file){ 
                	var dianIndex = file.name.indexOf("."),
                		name = "";
	                //验证格式
	                if(dianIndex != -1){
	                	name = file.name.substring(dianIndex);
	                	if(!_x.isImage(name)){
	                        _x.showTip("请上传图片，格式为jpg/jpeg/png/gif");
	                        that.val("");
	                        return false;
	                    }
	                }
	                
                    //验证大小
                    if(file.size > 10485760){
                        _x.showTip("图片大小超出限制");
                        that.val("");
                        return false;
                    }
                   
                    upload_file(file,that);
                }
            });
            
            //上传
            function upload_file(file,fileDom){
                var xhr = new XMLHttpRequest(),
                    formData = new FormData(),
                    uploadDom = fileDom.parents(".upload")
                
                fileDom.hide()
                fileDom.siblings("p.progress").text("0%").show()
                    
                formData.append(fileDom.attr("name"),file);
                xhr.open("post","/supply/submit",true);
                xhr.addEventListener("load",function(){
                    var result = JSON.parse(this.response);
                 	fileDom.show()
                 	fileDom.siblings("p.progress").hide()
                 	uploadDom.removeClass("err").addClass("suc")
                 	uploadDom.data("vaildate", 1)
                 	uploadDom.children("p.look").attr("src", result.src)
                 	uploadDom.children("p.errtext").remove()
                });

                xhr.upload.addEventListener('progress',function(e){//监听XMLHttpRequest对象的progress事件，读取完毕后触发
                    if(e.lengthComputable){//是否可以计算上传字节数
                        var percent = parseInt(e.loaded / e.total * 100); 
                        fileDom.siblings("p.progress").text(percent + "%")
                    };
                });
                
                xhr.addEventListener('error',function(e){//监听XMLHttpRequest对象的progress事件，读取完毕后触发
                	_x.showTip("上传失败,请检查您的网络！");
                	fileDom.show()
                	fileDom.siblings("p.progress").hide()
                });
                
                xhr.send(formData);
            };
           
            //模板展示
           	var templateDom = $("#show-template"),
           		$win_Width = $(window).width(),
           		$win_Height = $(window).height(),
           		templateImg = null;
            
           	templateDom.on("touchmove",function(e){
           		e.preventDefault();
           	});
           	
           	//关闭
           	templateDom.on("click",".swiper-container",function(e){
           		templateImg = null;
           		templateDom.removeClass("visible");
           		templateDom.children(".loading").removeClass("animatie").hide();
           	});
           	
           	templateDom.on("transitionend",function(){
           		if(!$(this).hasClass("visible")){
           			$(this).children("img").attr("src","").removeClass("show");
           		}
          	})
          	
           	//显示模板
            ulDom.on("click",".look-hook",function(){
            	var that = $(this),
            		sildeArr = [],
            		srcArr = []
            	
            	if (!_x.isEmpty(that.attr("modelpath"))) {
            		var modelpath = that.attr("modelpath"),
            			modelname = that.attr("modelname").split(",")
            		
            		for (var i = 0; i < modelname.length;i++) {
            			sildeArr.push(["<div class='swiper-slide' index='"+ i +"'><img /></div>"])
            			srcArr.push(modelpath + modelname[i])
            		}	
            			
            	} else {
            		var src = that.attr("src")
            		if (!_x.isEmpty(src)) {
	            		sildeArr.push(["<div class='swiper-slide' index='0'><img /></div>"])
	            		srcArr.push(src)
            		}
            	}
            	
            	if(sildeArr.length === 0){
            		_x.showTip("暂无预览图片！");
            		return;
            	}
            	
            	templateDom.addClass("visible")
            	templateDom.children(".loading").addClass("animatie").show()
            	
            	mySwiper.removeAllSlides()
            	mySwiper.appendSlide(sildeArr)
            	
            	for (var i = 0; i < srcArr.length; i++) {
            		var image = new Image()
            		image.src = srcArr[i]
            		image.index = i
            		image.onload = function () {
            			var imgW = this.width,
	            			imgH = this.height,
	            			data = _x.imgFormat(imgW,imgH,$win_Width,$win_Height),
	            			slideDom = templateDom.find("div.swiper-slide[index='"+ this.index +"']")
	            		slideDom.addClass("load-hook").children("img").css({
	            			"width":data.imgWidth,
	            			"height":data.imgHeight,
	            			"margin-left": - data.imgWidth / 2,
	            			"margin-top": - data.imgHeight / 2
	            		}).attr("src", this.src)
	            		
	            		if (slideDom.siblings().length > 1) {
	            			var mark = true
	            			slideDom.siblings().each(function(){
		            			if (!$(this).hasClass("load-hook")) {
		            				mark = false
		            				return false
		            			}
		            		})
		            		
		            		if (mark) {
		            			templateDom.children(".loading").removeClass("animatie").hide()
		            		}
	            			
	            		} else {
	            			templateDom.children(".loading").removeClass("animatie").hide()
	            		}
            		}
            		
            		image.onerror = function () {
            			templateDom.children(".loading").removeClass("animatie").hide()
            		}
            	}
            });
            
          	//显示上传的图片
            ulDom.on("click","i.showimg",function(){
            	var src= $(this).attr("imgsrc");
            	if(_x.isEmpty(src))return;
            	templateDom.addClass("visible");
            	templateDom.children(".loading").addClass("animatie").show();
            	templateImg = new Image();
            	templateImg.src = src;
            	templateImg.onload = function(){
            		var imgW = this.width,
            			imgH = this.height,
            			data = _x.imgFormat(imgW,imgH,$win_Width,$win_Height);
            		templateDom.children("img").attr("src",src).css({
            			"width":data.imgWidth,
            			"height":data.imgHeight,
            			"margin-left": - data.imgWidth / 2,
            			"margin-top": - data.imgHeight / 2
            		}).addClass("show");
            	}
            });
          	
          	//提交按钮
          	$("#subbtn").click(function(){
          		if (step === 0 || step === 1 || step === 3) {
          			var mark = true,
          				errDom = null
	          		ulDom.find("div.upload").each(function(){
	          			var that = $(this),
	          				vaildate = that.data("vaildate")
	          			if (vaildate === 0) {
	          				_x.showTip("请上传" + that.children("p.name").html())
	          				mark = false
	          				errDom = that
	          				return false
	          			} else if (vaildate === 2) {
	          				_x.showTip("请重新上传" + that.children("p.name").html())
	          				mark = false
	          				errDom = that
	          				return false
	          			}
	          		})
	          		
	          		if (mark) {
	          			$("#subbtn").html("<div class='textloading'></div>")
	          			
	          			axios.post("/supply/submitFinish")
	          			.then(function(res){
	          				if(res.data.code == 1){
								_x.showTip("提交成功！",{url: "/makeprice/uploadIndex"});
							}else{
								 x.showTip(res.data.msg)
								$("#subbtn").html("提交")
							}
	          			})
	          			.catch(function(){
	          				_x.showTip("提交失败，请检查您的网络！");
	          				$("#subbtn").html("提交")
	          			})
	          			
	          		} else {
	          			//滚动到没有上传的地方
	          			var hiddenDom = errDom.parents(".hidden"),
	          				titleDom = hiddenDom.siblings(".title")
	          			showHidden(titleDom.hasClass("show"), titleDom, hiddenDom, false)
	          			
	          			var bodyDom = document.body;
	                    _x.scrollAnimate(bodyDom.scrollTop,errDom.offset().top,4,function(pos){
	                    	bodyDom.scrollTop = pos
	                    });
	          		}
          		} else if (step === 2 || step === 4 || step === 5) {//不用验证
          			_x.showTip("提交成功！",{url: "/makeprice/uploadIndex"});
      			}
          		
          	})
            
          	//预览图
            var mySwiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				autoplayDisableOnInteraction: false
			})
          	
          	
          	ulDom.on("click",".addupload",function(){
          		var that = $(this),
          			paramterName = that.attr("name"),
          			len = that.siblings(".upload").length + 1,
          			html = "<div class='upload' data-vaildate='1'>"+
						   "	<p class='look look-hook'>预览</p>"+
						   "	<div class='uparea'>"+
						   "		<p class='progress'>0%</p>"+
						   "		<input type='file' name='"+ paramterName +"_"+ len +"' accept='"+ accept +"' />"+
						   "	</div>"+
						   "	<p class='name'>"+ len +"</p>"+
						   "</div>"
				$(html).insertBefore(that)
				
				//增加高度
				var hiddenDom = that.parents(".hidden"),
					h = that.prev().outerHeight() + 9
				hiddenDom.css("height", hiddenDom.height() + h)
          	})
            
        });
    </script>


</body>
</html>
